<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>门店收入报表</title>
    <#include "/common/link.ftl" >
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >

    <#assign currentMenu="businessReport"/>

    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>门店收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                    <!--高级查询--->
                    <form class="form-inline" id="searchForm" action="/Report/list" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label>门店查询</label>
                            <select class="form-control" id="businessselect" name="business_id">
                                <option value="">请选择门店</option>
                                <#list businesses as tmp>
                                    <option value="${tmp.id}">${tmp.name}</option>
                                </#list>
                            </select>
                            <script>
                                $("#businessselect").val(${qo.business_id});
                            </script>
                        </div>
                        <div class="form-group">
                            <label>时间段查询:</label>
                            <div class="input-daterange input-group" >
                                <input name="startDate" type="text" class="input-sm form-control"  value="${(qo.startDate?string('yyyy-MM-dd HH:mm:ss'))!}" />
                                <span class="input-group-addon">到</span>
                                <input name="endDate" type="text" class="input-sm form-control"  value="${(qo.endDate?string('yyyy-MM-dd HH:mm:ss'))!}"/>
                            </div>
                        </div><div class="form-group">
                            <label>结算单状态</label>
                            <select name="status" class="form-control" id="consumptionstatusid">
                                <option value="">全部</option>
                                <#list consumptionStatuses as tmp>
                                 <option value="${tmp.getValue()}">${tmp.getName()}</option>
                                </#list>
                            </select>
                            <script>
                                $("#consumptionstatusid").val(${qo.status});
                            </script>
                        </div>

                        <div class="form-group">
                            <label>预约类型</label>
                            <select name="appointState" class="form-control" id="appointState">
                                <option value="">请选择预约类型</option>
                                <option value="1">预约</option>
                                <option value="0">非预约</option>
                            </select>
                            <script>
                                $("#appointState").val(${(qo.appointState?string('1', '0'))!''});
                            </script>
                        </div>

                        <br/>
                        <br/>

                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" name="groupcondition" id="groupcondition">
                                <option value="b.name">门店</option>
                                <option value="year(c.create_time)">年</option>
                                <option value="month(c.create_time)">月</option>
                                <option value="day(c.create_time)">日</option>
                            </select>
                            <script>
                                $("#groupcondition").val('${qo.groupcondition}');
                            </script>
                        </div>

                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
                        <button id="showechartsbtn" type="button" class="btn btn-info btn-chart" >
                            <span class="glyphicon glyphicon-stats"></span> 柱状图
                        </button>
                    </form>
                </div>
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>分组类型</th>
                                <th>总订单数</th>
                                <th>总消费金额</th>
                                <th>总实收金额</th>
                                <th>总优惠金额</th>
                            </tr>
                        </thead>
                        <tbody>
                        <#list result.list as tmp>
                            <tr>
                                <td>${tmp.groupmethod}</td>
                                <td>${tmp.count}</td>
                                <td>${tmp.total}</td>
                                <td>${tmp.pay}</td>
                                <td>${tmp.discount}</td>
                            </tr>
                        </#list>
                        </tbody>

                    </table>
                    <#include "/common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div id="main" class="modal-content" style="padding: 20px;height: 500px;width: 1000px;">

        </div>
    </div>
</div>

</body>
</html>

<script>
    $("#showechartsbtn").click(function (){
        $("#chartModal").modal("show");
    });
</script>

<#--<p data-json1='${groupmethod_json}' data-json2='${count_json}'></p>-->

<script>
    var groupmethod_json = '${groupmethod_json}';
    var count_json = '${count_json}';
    var total_json = '${total_json}';
    var discount_json = '${discount_json}';
    var pay_json = '${pay_json}';

    var groupmethod_js = JSON.parse(groupmethod_json);
    var count_js = JSON.parse(count_json);
    var total_js = JSON.parse(total_json);
    var discount_js = JSON.parse(discount_json);
    var pay_js = JSON.parse(pay_json);
</script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['总金额', '总优惠', '总实收', '总订单']
        },
        xAxis: [
            {
                type: 'category',
                data: groupmethod_js,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '金额',
                min: 0
            },
            {
                type: 'value',
                name: '数量',
                min: 0
            }
        ],
        series: [
            {
                name: '总金额',
                color: 'red',
                type: 'bar',
                data: total_js
            },
            {
                name: '总优惠',
                color: 'green',
                type: 'bar',
                data: discount_js
            },
            {
                name: '总实收',
                color: 'blue',
                type: 'bar',
                data: pay_js
            },
            {
                name: '总订单',
                color: 'red',
                type: 'line',
                yAxisIndex: 1,
                data: count_js
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>